<template>
  <div class="meeting-ai">
    <div class="header">
      <div
        class="header-left"
        style="display: flex; align-items: center; cursor: pointer"
      >
        <el-icon :size="24" style="margin-right: 20px" @click="router.back()"
          ><ArrowLeft /></el-icon
        >AI会议助手项目进度沟通
      </div>
      <div class="header-right" v-if="isCreator">
        <el-button type="primary" @click="handleExportHtmlToWord"
          >导出</el-button
        >
      </div>
    </div>
    <div class="meeting-content" ref="meetingContentRef">
      <!-- 左侧音频翻译列表列表 -->
      <div class="left" v-loading="loading">
        <!-- 翻译列表 -->
        <div class="chat infinite-list" style="overflow: auto">
          <div
            class="infinite-list-item"
            v-if="initArr.length"
            v-for="(item, index) in initArr"
            :key="index"
            @mouseleave="item.show = false"
            @mouseenter="item.show = true"
          >
            <div class="chat-item">
              <div
                class="chat-avatar"
                :style="{
                  backgroundColor: item.color,
                }"
              >
                {{ convertString(item.speaker) }}
              </div>
              <div class="chat-record">
                <div class="time">发言人:{{ item.speaker }}</div>
                <div class="bottom">
                  <div class="record">
                    <el-input
                      type="textarea"
                      border="none"
                      resize="none"
                      v-model="item.text"
                      @input="handleInput"
                      :disabled="!isCreator"
                      autosize
                    ></el-input>
                  </div>
                  <div style="width: 40px">
                    <el-icon
                      size="24"
                      color="red"
                      v-if="item.show && isCreator"
                      @click="handleDelete(item)"
                    >
                      <Delete />
                    </el-icon>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 底部交互栏 -->
        <div class="chat-footer">
          <div class="translate" v-if="isCreator">
            <el-button v-popover="popoverRef" @click="handlReplaceSend">
              <template #default>
                <div
                  style="
                    width: 24px;
                    height: 24px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    border-radius: 50%;
                    background-color: #abaaf9;
                  "
                >
                  <el-icon style="transform: rotate(90deg)" color="#f9cd3c"
                    ><Sort
                  /></el-icon>
                </div>
                <span style="margin-left: 4px">发言人替换</span>
              </template>
            </el-button>
            <el-button
              v-popover="wordRef"
              @click="
                () => {
                  ;(wordVisible = true), (audioVisible = false)
                  visible = false
                }
              "
              ><div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  gap: 4px;
                "
              >
                <span
                  style="color: #f9cd3c; font-size: 18px; font-weight: 600"
                  class="word"
                  >词</span
                >
                热词替换
              </div></el-button
            >
            <el-button :loading="translating" @click="handleTranslateFromAi">
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  gap: 4px;
                "
              >
                <el-icon><EditPen /></el-icon>智能全文
              </div>
            </el-button>
          </div>
          <div class="media">
            <div class="media-left">
              <el-button
                type="primary"
                v-popover="audioRef"
                @click="
                  () => {
                    ;(wordVisible = false), (audioVisible = true)
                    visible = false
                  }
                "
              >
                <el-icon><CaretRight /></el-icon>
                音频文件
              </el-button>
            </div>
            <div class="media-right">
              <audio ref="audiodomRef" controls class="audio-m">
                <source :src="audioURL" />
              </audio>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="resize">⋮</div> -->
      <!-- 右侧工具栏 -->
      <div class="right">
        <div class="editor-wrapper">
          <Toolbar
            class="toolbar-container"
            style="border-bottom: 1px solid #ccc"
            :editor="editorRef"
            :defaultConfig="toolbarConfig"
            :mode="mode"
          />
          <Editor
            style="flex: 1; overflow-y: hidden"
            v-model="valueHtml"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="handleCreated"
            @onChange="handleChange"
          />
        </div>
      </div>
    </div>
  </div>
  <!-- 发言人替换  -->
  <el-popover
    ref="popoverRef"
    trigger="click"
    virtual-triggering
    persistent
    placement="top"
    width="400px"
    :visible="visible"
  >
    <div class="send">
      <div
        class="word-header"
        style="height: 40px; display: flex; justify-content: space-between"
      >
        <span>发言人替换</span>
        <el-icon style="cursor: pointer" @click="visible = false">
          <Close />
        </el-icon>
      </div>
      <div class="title">
        将本次转换结果中的发言人称谓，修改为实际 发言人称谓。
      </div>
      <div
        class="send-w"
        style="
          display: flex;
          margin-top: 10px;
          gap: 10px;
          flex-direction: column;
          align-items: flex-end;
        "
      >
        <div
          class="send-item"
          v-for="(item, index) in allSpeakers"
          :key="index"
        >
          <el-input :value="item" style="width: 140px" disabled />
          <el-icon style="transform: rotate(90deg)"><Sort /></el-icon>
          <el-input
            clearable
            v-model="speakerReplaceForm[item]"
            style="width: 200px"
            placeholder="请输入替换的名称"
          />
        </div>
        <el-button type="primary" @click="applySpeakerReplace">应用</el-button>
      </div>
    </div>
  </el-popover>
  <!-- 热词替换  -->
  <el-popover
    ref="wordRef"
    trigger="click"
    virtual-triggering
    persistent
    placement="top"
    width="420px"
    :visible="wordVisible"
  >
    <div class="send">
      <div class="title">
        <div
          class="word-header"
          style="height: 40px; display: flex; justify-content: space-between"
        >
          <span>热词替换</span>
          <el-icon style="cursor: pointer" @click="wordVisible = false"
            ><Close
          /></el-icon>
        </div>
        <span></span>
      </div>
      <div
        class="send-w"
        style="
          display: flex;
          margin-top: 10px;
          gap: 10px;
          flex-direction: column;
          align-items: flex-end;
        "
      >
        <div class="send-item" style="display: flex; align-items: center">
          <el-input
            v-model="hotWord"
            style="width: 180px"
            disapled
            placeholder="请输入被替换的内容"
          />
          <el-icon style="transform: rotate(90deg)"><Sort /></el-icon>
          <el-input
            v-model="replaceHotWord"
            style="width: 200px"
            placeholder="请输入热词"
          />
        </div>
        <el-button type="primary" @click="applyHotWord">应用</el-button>
      </div>
    </div>
  </el-popover>
  <!-- 音频列表 -->
  <el-popover
    ref="audioRef"
    trigger="click"
    virtual-triggering
    persistent
    placement="top"
    width="300px"
    :visible="audioVisible"
  >
    <div class="send">
      <div class="title">
        <div
          class="word-header"
          style="height: 40px; display: flex; justify-content: space-between"
        >
          <span>音频列表</span>
          <el-icon style="cursor: pointer" @click="audioVisible = false"
            ><Close
          /></el-icon>
        </div>
        <div class="audio-wrapper">
          <el-radio-group v-model="selectRadio" @change="handleChangeRadio">
            <el-radio
              v-for="item in audioList"
              :key="item.id"
              :label="item.file_name"
              :value="item.file_id"
            >
              {{ item.file_name }}</el-radio
            >
          </el-radio-group>
        </div>
      </div>
    </div>
  </el-popover>
  <el-dialog v-model="deleteVisible" title="确定删除吗？" width="500">
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="deleteVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmEvent"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 底部 -->
</template>
<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import markdownModule from '@wangeditor/plugin-md'
import { Boot } from '@wangeditor/editor'
import {
  httpSelectMeeting,
  saveMeetingText,
  saveGenerateText,
  viewGenerateText,
} from '@/api/meeting.js'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import {
  ref,
  shallowRef,
  onBeforeUnmount,
  watch,
  nextTick,
  onMounted,
} from 'vue'
import { showAfterTranslateList, generateText } from '@/api/meeting.js'
import { asBlob } from 'html-docx-js-typescript'
const imageSuffix = import.meta.env.VITE_IMAGE_SUFFIX
import { debounce, replaceAll, colors, convertString } from '@/utils/tools.ts'
import { useRoute, useRouter } from 'vue-router'
import useUserStore from '@/stores/user.js'
import { storeToRefs } from 'pinia'
const userStore = useUserStore()
const { info } = storeToRefs(userStore)
const meetingContentRef = ref()
const audiodomRef = ref()
const route = useRoute()
const router = useRouter()
const popoverRef = ref() // 发言人替换ref
const wordRef = ref() // 热词替换ref
const audioRef = ref() // 音频列表Ref
const speakerReplaceForm = ref({}) // 替换之后的key-value
const visible = ref(false) // visible 发言人
const wordVisible = ref(false) // visible 热词替换
const audioVisible = ref(false) // visible 音频列表
const hotWord = ref('') // 热词
const replaceHotWord = ref('') // 替换热词
const initArr = ref([]) // 对话数据
const selectRadio = ref('')
const audioList = ref([]) // 音频列表
const audioURL = ref('')
const allSpeakers = ref([]) // 所有speakers
const meetingTitle = ref('')
const isCreator = ref(false) // 是否是参与者 参与者只允许查看
const deleteVisible = ref(false)
const deleteItem = ref({}) // 删除项

Boot.registerModule(markdownModule)

/**
 * 发言人替换 弹窗
 */
const handlReplaceSend = () => {
  wordVisible.value = false
  audioVisible.value = false
  visible.value = true
}
/**
 * 切换音频
 * @param {*} value
 */
const handleChangeRadio = (value) => {
  audioURL.value = imageSuffix + value
  audiodomRef.value && (audiodomRef.value.src = audioURL.value)
  // audiodomRef.value && audiodomRef.value.play()
}

/**
 * 初始化音频列表数据
 */
const initRadio = async () => {
  const res2 = await httpSelectMeeting({
    meeting_id: parseInt(route.params?.id),
  })
  if (res2) {
    meetingTitle.value = res2.list[0].name
    audioList.value = res2.list[0].material
    audioURL.value = audioList.value.length
      ? imageSuffix + (audioList.value.length && audioList.value[0].file_id)
      : ''
    selectRadio.value = audioList.value.length ? audioList.value[0].file_id : ''
    isCreator.value =
      res2.list[0].creator &&
      res2.list[0].creator.includes(info.value.user_info_id)
    nextTick(() => {
      audiodomRef.value.src = audioURL.value
      // audiodomRef.value && audiodomRef.value.play()
      !isCreator.value && editorRef.value && editorRef.value.disable()
    })
  }
}
/**
 * 初始化音频转译数据列表
 */
const loading = ref(false)
// 分批渲染函数
const BATCH_SIZE = 50 // 每批渲染数量
const batchRender = (startIndex = 0, allData = []) => {
  if (startIndex >= allData.length) {
    return
  }
  const endIndex = Math.min(startIndex + BATCH_SIZE, allData.length)
  const batch = allData.slice(startIndex, endIndex)
  initArr.value = [...initArr.value, ...batch]
  requestAnimationFrame(() => {
    batchRender(endIndex,allData)
  })
}
const initIndex = ref(0)
const initData = async () => {
  try {
    loading.value = true
    const res = await showAfterTranslateList({
      meeting_id: route.params?.id,
    })
    let obj = res.list && res.list[0]
    let newscripts = obj.scripts && JSON.parse(obj.scripts)
    // 多个音频 scirpt 是个数组
    newscripts &&
      newscripts.forEach((item) => {
        item.result.forEach((x, index) => {
          // 添加一个字段color 相同speaker color值相同
          let obj = item.result.find((c) => c.speaker == x.speaker)
          if (obj) {
            x.color = obj.color || colors[index]
          } else {
            x.color = colors[index]
          }
        })
      })
    // 合并数组
    let newarr =
      newscripts &&
      newscripts.reduce((prev, curr) => {
        prev.push(...curr.result)
        return prev
      }, [])
    
    if(initIndex.value === 0){
      batchRender(0, newarr)
    }else {
      initArr.value = newarr || []
    }
    initIndex.value++
    // 过滤所有speaker
    if (newarr && newarr.length) {
      allSpeakers.value = newarr.reduce((prev, curr) => {
        if (!prev.includes(curr.speaker)) {
          prev.push(curr.speaker)
          speakerReplaceForm.value[curr.speaker] = curr.speaker
        }
        return prev
      }, [])
    }
  } catch (error) {
    console.error(error)
  } finally {
    loading.value = false
  }
}
/**
 * 保存修改接口
 * @param data
 */
const saveModifyCotent = async (data) => {
  if (!isCreator.value) return
  const res = await saveMeetingText({
    meeting_id: route.params.id,
    scripts: JSON.stringify(data),
  })
  await initData()
}
const dataArr = () => {
  return (
    (initArr.value.length && JSON.parse(JSON.stringify(initArr.value))) || []
  )
}
/**
 * 发言人替换 ajax
 */
const applySpeakerReplace = () => {
  let data = dataArr().map((item) => {
    if (speakerReplaceForm.value[item.speaker]) {
      item.speaker = speakerReplaceForm.value[item.speaker]
    }
    return {
      start: item.start,
      end: item.end,
      speaker: item.speaker,
      text: item.text,
    }
  })
  visible.value = false
  saveModifyCotent(data)
}
/**
 * 热词替换
 */
const applyHotWord = () => {
  let data = dataArr().map((item) => {
    if (item.text && item.text.includes(hotWord.value)) {
      item.text = replaceAll(item.text, hotWord.value, replaceHotWord.value)
    }
    return {
      start: item.start,
      end: item.end,
      speaker: item.speaker,
      text: item.text,
    }
  })
  saveModifyCotent(data)
}

/**
 * 删除聚焦的对话
 * @param {*} item
 */
const handleDelete = (item) => {
  deleteItem.value = item
  item.show = false
  deleteVisible.value = true
}
const confirmEvent = () => {
  let data = dataArr()
    .filter((x) => {
      return (
        x.start !== deleteItem.value.start && x.end !== deleteItem.value.end
      )
    })
    .map((c) => {
      return {
        start: c.start,
        end: c.end,
        speaker: c.speaker,
        text: c.text,
      }
    })
  saveModifyCotent(data)
  deleteVisible.value = false
  deleteItem.value = {}
}

/**
 * 实时编辑 修改对话文本
 */
const handleInput = debounce(() => {
  let data = dataArr()
    .filter((x) => x.text.trim())
    .map((item) => {
      return {
        start: item.start,
        end: item.end,
        speaker: item.speaker,
        text: item.text,
      }
    })
  saveModifyCotent(data)
}, 800)

/**
 *  * 导出html为word
 */
const handleExportHtmlToWord = async () => {
  let html = editorRef.value.getHtml()
  let value = `<!DOCTYPE html><html lang="en"><body style="font-family:方正仿宋_GBK,serif;mso-ascii-font-family:'Times New Roman';">${html}</body></html>`
  // 将html转为word的blob
  const data = await asBlob(value, {
    orientation: 'landscape',
    margins: { top: 100 },
  })
  let aTag = document.createElement('a')
  aTag.href = (URL || webkitURL).createObjectURL(data)
  aTag.setAttribute('download', 'file.docx')
  aTag.click()
  // 下载后将标签移除
  aTag.remove()
}
const translating = ref(false)
/**
 * 智能全文
 * @param item 智能全文
 */
const handleTranslateFromAi = async (item) => {
  visible.value = false
  audioVisible.value = false
  wordVisible.value = false
  translating.value = true
  const res = await generateText({
    meeting_id: route.params.id,
    type_id: 1,
  })
  const res2 = await generateText({
    meeting_id: route.params.id,
    type_id: 2,
  })
  translating.value = false
  // 可能存在 某一个接口崩掉
  let content1 = res.list[0] && res.list[0].trim()
  let content2 = res2.list[0] && res2.list[0].trim()
  let meetingTitleContent = `<h1 style='text-align: center;'>${meetingTitle.value}</h1>`
  let meetingAbstract = `<h3>会议摘要</h3><p>${content1}</p>`
  let meetingSum = `<h3>会议总结</h3><p>${content2} </p>`
  nextTick(() => {
    editorRef.value &&
      editorRef.value.setHtml(
        meetingTitleContent + meetingAbstract + meetingSum,
      )
  })
}

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
const valueHtml = ref('')
const mode = ref('default')

const toolbarConfig = {
  excludeKeys: [
    'emotion',
    'group-image',
    'group-video',
    'insertTable',
    'codeBlock',
    'insertLink',
  ],
}
const editorConfig = { placeholder: '请输入内容...' }

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})
// 富文本及时保存
const initHtmlValue = ref('')
let editHtml = ref('')
const handleChange = debounce(async (editor) => {
  let text = editor.getText()
  let flag = text.trim() && initHtmlValue.value != valueHtml.value
  let flag2 = editHtml.value != valueHtml.value && isCreator.value
  if (flag && flag2) {
    const res = await saveGenerateText({
      meeting_id: route.params.id,
      summary_content: valueHtml.value,
    })
    editHtml.value = valueHtml.value
  }
}, 1000)
const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}

/**
 * 初始化文章
 */
const initHtml = async () => {
  const res = await viewGenerateText({
    meeting_id: route.params.id,
  })
  if (res && res.list[0].summary_content) {
    initHtmlValue.value = res.list[0].summary_content
    editorRef.value && editorRef.value.setHtml(res.list[0].summary_content)
  }
}
watch(
  () => route.params?.id,
  () => {
    initData()
    initRadio()
    initHtml()
  },
  {
    immediate: true,
  },
)
function dragControllerDiv() {
  var resize = document.getElementsByClassName('resize')
  var left = document.getElementsByClassName('left')
  var mid = document.getElementsByClassName('right')
  var box = document.getElementsByClassName('meeting-content')
  for (let i = 0; i < resize.length; i++) {
    // 鼠标按下事件
    // @ts-ignore
    resize[i].onmousedown = function (e) {
      //颜色改变提醒
      // @ts-ignore
      // resize[i].style.background = '#818181'
      resize[i].style.background = '#ccc'
      var startX = e.clientX
      // @ts-ignore
      resize[i].left = resize[i].offsetLeft
      // 鼠标拖动事件
      document.onmousemove = function (e) {
        var endX = e.clientX
        // @ts-ignore
        var moveLen = resize[i].left + (endX - startX) // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
        // @ts-ignore
        var maxT = box[i].clientWidth - resize[i].offsetWidth // 容器宽度 - 左边区域的宽度 = 右边区域的宽度

        if (moveLen < 32) moveLen = 32 // 左边区域的最小宽度为32px
        if (moveLen > maxT - 150) moveLen = maxT - 150 //右边区域最小宽度为150px
        // @ts-ignore
        resize[i].style.left = moveLen // 设置左侧区域的宽度

        for (let j = 0; j < left.length; j++) {
          // @ts-ignore
          left[j].style.width = moveLen + 'px'
          // @ts-ignore
          mid[j].style.width = box[i].clientWidth - moveLen - 10 + 'px'
        }
      }
      // 鼠标松开事件
      document.onmouseup = function (evt) {
        //颜色恢复
        // @ts-ignore
        resize[i].style.background = '#d6d6d6'
        document.onmousemove = null
        document.onmouseup = null
        // @ts-ignore
        resize[i].releaseCapture && resize[i].releaseCapture() //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
      }
      // @ts-ignore
      resize[i].setCapture && resize[i].setCapture() //该函数在属于当前线程的指定窗口里设置鼠标捕获
      return false
    }
  }
}
// onMounted(() => {
//   // dragControllerDiv()
// })
</script>
<style scoped lang="scss">
.meeting-ai {
  height: calc(100vh - 100px);
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    font-size: 20px;
    font-weight: 600;
  }
}
.meeting-content {
  border: 1px solid #ccc;
  display: flex;
  height: 100%;
  .line {
    width: 2px;
    background-color: #ccc;
    height: 100%;
  }
  .left {
    width: 50%;
    height: 100%;
    padding: 10px 10px 0 10px;
    .chat {
      height: 80%;
      display: flex;
      flex-direction: column;
      gap: 10px;
      overflow-y: auto;
      padding: 5px;
      .chat-item {
        display: flex;
        padding: 10px;
        align-items: center;
        width: 100%;
        cursor: pointer;
        box-shadow: 1px 1px 5px #ddd;
        .chat-avatar {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          flex-shrink: 0;
          border: 1px solid #ccc;
          font-size: 20px;
          text-align: center;
          line-height: 40px;
        }
        .chat-record {
          flex: 1;
          color: #b2aaaa;
          font-size: 12px;
          padding: 4px;
          // .time {
          // }
          .bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 4px;
            .record {
              width: 100%;
              display: flex;
              flex-wrap: wrap;
            }
          }
        }
      }
    }
    .chat-footer {
      height: 18%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 10px;
      .translate {
        height: 60px;
        border-radius: 10px;
        border: 1px solid #ccc;
        background-color: #fff;
        display: flex;
        padding: 0 8px;
        align-items: center;
        gap: 10px;
        :deep(.el-button) {
          border-radius: 10px !important;
          padding: 2px 6px !important;
        }
        .trans-btn {
          height: 32px;
          display: flex;
          align-items: center;
          width: fit-content;
          padding: 4px 10px;
          background-color: #f2f2f2;
          border-radius: 10px;
          font-size: 12px;
          cursor: pointer;
          gap: 4px;
          .word {
            color: #f9cd3c;
            font-size: 18px;
            font-weight: 500;
          }
          .rotate {
            transform: rotate(90deg);
            display: block;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background-color: #abaaf9;
          }
        }
      }
      .media {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .media-right {
          width: 80%;
          .audio-m {
            width: 100%;
          }
        }
      }
    }
  }
  .right {
    width: 50%;
    height: 100%;
    // background-color: pink;
    .editor-wrapper {
      border-left: 1px solid #ccc;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      padding-bottom: 10px;
      .toolbar-container {
        height: auto;
      }
    }
  }
}
.infinite-list {
  height: 80%;
}
.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}
/* 滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
}
/* 滑块样式 */
::-webkit-scrollbar-thumb {
  background-color: #9f9f9f;
  border-radius: 10px;
}
/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
  background-color: #fcfcfc;
  border-radius: 10px;
}
/* 滚动条样式 */
::-webkit-scrollbar {
  width: 12px;
}
/* 滑块样式 */
::-webkit-scrollbar-thumb {
  background-color: #9f9f9f;
  border-radius: 10px;
}
/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
  background-color: #fcfcfc;
  border-radius: 10px;
}
.chat-record {
  // :deep(.el-input__wrapper) {
  //   box-shadow: none !important;
  //   padding: 0 !important;
  // }
  :deep(.el-textarea__inner) {
    box-shadow: none !important;
    padding: 4px !important;
  }
  :deep(.el-textarea__inner:focus) {
    box-shadow: 0 0 0 1px var(--el-input-focus-border-color) inset !important;
  }
}
// ::v-deep .el-checkbox__label {
//   vertical-align: text-top;
//   white-space: normal;
//   word-break: break-all;
//   width: 150px;
// }
::v-deep .el-radio__label {
  vertical-align: text-top;
  white-space: normal;
  word-break: break-all;
  width: 150px;
}
/* 滚动条轨道样式 */
::v-deep .el-textarea__inner::-webkit-scrollbar-track {
  background-color: #fcfcfc !important;
  border-radius: 10px !important;
  cursor: pointer !important;
}
/* 滚动条样式 */
::v-deep .el-textarea__inner::-webkit-scrollbar {
  width: 12px !important;
  cursor: pointer !important;
}
/* 滑块样式 */
::v-deep .el-textarea__inner::-webkit-scrollbar-thumb {
  background-color: #9f9f9f !important;
  border-radius: 10px !important;
  cursor: pointer !important;
}
/* 滚动条轨道样式 */
::v-deep .el-textarea__inner::-webkit-scrollbar-track {
  background-color: #fcfcfc !important;
  border-radius: 10px !important;
  cursor: pointer !important;
}
.resize {
  cursor: col-resize;
  float: left;
  position: relative;
  top: 45%;
  background-color: #ccc;
  border-radius: 5px;
  margin-top: -10px;
  width: 10px;
  height: 50px;
  background-size: cover;
  background-position: center;
  font-size: 32px;
  color: white;
}
/*拖拽区鼠标悬停样式*/
.resize:hover {
  color: #444444;
}
.el-textarea.is-disabled {
  :deep(.el-textarea__inner) {
    background-color: transparent !important;
  }
}
</style>
